import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  SafeAreaView,
  Image,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';

const user = {
  name: '许夏天',
  department: '技术部',
  id: '25021',
  avatar: '', // 可替换为本地图片
};

const stats = [
  { label: '累计年假', value: 15 },
  { label: '累计病假', value: 15 },
  { label: '累计调休', value: 15 },
];

const menuList = [
  { id: 1, title: '我的请假', color: '#bcbcff', icon: '📄' },
  { id: 2, title: '我的审批', color: '#7ee2ff', icon: '👤' },
  { id: 3, title: '加班统计', color: '#b3c6ff', icon: '⏰' },
  { id: 4, title: '会议记录', color: '#ffe97a', icon: '📝' },
  { id: 5, title: '我的资料', color: '#ffd59a', icon: '📁' },
  { id: 6, title: '帮助中心', color: '#bcbcff', icon: '❓' },
  { id: 7, title: '设置', color: '#a2f5c8', icon: '⚙️' },
];

const Profile = () => {
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={{ paddingBottom: 40 }}>
        {/* 顶部紫色背景和头像 */}
        <View style={styles.topBg}>
          <View style={styles.avatarBox}>
            <View style={styles.avatarCircle}>
              {/* 可替换为<Image source={require('...')} style={styles.avatarImg} /> */}
              <Text style={styles.avatarEmoji}>🙂</Text>
            </View>
          </View>
          <View style={styles.userInfoBox}>
            <Text style={styles.userName}>{user.name}</Text>
            <View style={styles.deptTag}><Text style={styles.deptTagText}>{user.department}</Text></View>
          </View>
          <Text style={styles.userId}>工号：{user.id}</Text>
          {/* 统计栏 */}
          <View style={styles.statsBox}>
            {stats.map((item, idx) => (
              <View style={styles.statItem} key={item.label}>
                <Text style={styles.statValue}>{item.value}</Text>
                <Text style={styles.statLabel}>{item.label}</Text>
              </View>
            ))}
          </View>
        </View>
        {/* 菜单列表 */}
        <View style={styles.menuBox}>
          {menuList.map(item => (
            <TouchableOpacity
              key={item.id}
              style={styles.menuItem}
              activeOpacity={0.7}
              onPress={() => {
                if (item.title === '设置') navigation.navigate('设置');
              }}
            >
              <View style={[styles.menuIcon, { backgroundColor: item.color }]}> 
                <Text style={styles.menuIconText}>{item.icon}</Text>
              </View>
              <Text style={styles.menuTitle}>{item.title}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  topBg: {
    backgroundColor: '#7B83FF',
    borderBottomLeftRadius: 30,
    borderBottomRightRadius: 30,
    alignItems: 'center',
    paddingBottom: 24,
    paddingTop: 32,
  },
  avatarBox: {
    alignItems: 'center',
    marginBottom: 8,
  },
  avatarCircle: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 6,
    borderWidth: 3,
    borderColor: '#e6e7ff',
  },
  avatarEmoji: {
    fontSize: 48,
  },
  userInfoBox: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 2,
  },
  userName: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
    marginRight: 8,
  },
  deptTag: {
    backgroundColor: '#e6e7ff',
    borderRadius: 8,
    paddingHorizontal: 8,
    paddingVertical: 2,
  },
  deptTagText: {
    color: '#7B83FF',
    fontSize: 13,
  },
  userId: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 15,
    marginBottom: 10,
  },
  statsBox: {
    flexDirection: 'row',
    backgroundColor: '#7B83FF',
    borderRadius: 16,
    marginTop: 10,
    marginHorizontal: 16,
    elevation: 2,
    shadowColor: '#000',
    shadowOpacity: 0.06,
    shadowRadius: 8,
    justifyContent: 'space-between',
    width: '90%',
    alignSelf: 'center',
  },
  statItem: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 8,
  },
  statValue: {
    color: '#e6e7ff',
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 2,
  },
  statLabel: {
    color: '#e6e7ff',
    fontSize: 13,
  },
  menuBox: {
    marginTop: 24,
    marginHorizontal: 0,
    backgroundColor: '#fff',
    borderRadius: 16,
    overflow: 'hidden',
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 24,
    height: 52,
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2',
  },
  menuIcon: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 16,
  },
  menuIconText: {
    fontSize: 20,
  },
  menuTitle: {
    fontSize: 16,
    color: '#444',
  },
});

export default Profile; 